<template>
  <div class="common-layout">
    <el-container>
      <!-- 动态绑定 header 的样式 -->
      <el-header 
        :style="{
          'background-color': isHomePage ? 'rgb(15, 50, 89)' : '#fff',
          'color': isHomePage ? 'white' : 'black',
          'font-size': 'large',
          'display': 'flex',
          'justify-content': 'space-between',
          'align-items': 'center',
          'padding': '0 20px',
          'border-bottom': isHomePage ? 'none' : '1px solid #eee'
        }"
      >
        <!-- 左侧只显示标题文字 -->
        <div 
          class="homePageTitle"
          :style="{
            'font-weight': 'bold',
            'margin-left': '10px',
            'color': isHomePage ? 'white' : 'inherit'
          }" 
          @click="handleOpen('/home')"
        >
          通信塔无人机巡检平台
        </div>
  
        <!-- 右侧所有图标和下拉菜单 -->
        <div style="display: flex; align-items: center; gap: 15px;">
          <!-- 菜单图标 -->
          <el-icon 
            :size="20" 
            style="cursor: pointer;" 
            @click="handleOpen('/newHomePage/alarm')"
            :color="isHomePage ? 'white' : 'inherit'"
          >
            <Menu />
          </el-icon>
    
          <!-- 通知铃铛 -->
          <el-badge  v-if="totalAlarms > 0" :value="totalAlarms" :max="99" style="margin-top: 6px;">
            <el-icon 
              :size="20" 
              style="cursor: pointer;" 
              @click="handleOpen('/newHomePage/alarm') , refreshAlarms()"
              :color="isHomePage ? 'white' : 'inherit'"
            >
              <Bell />
            </el-icon>
          </el-badge>
          <el-icon
            v-else
            :size="20"
            style="cursor: pointer; margin-top: 6px;"
            @click="handleOpen('/newHomePage/alarm'), refreshAlarms()"
            :color="isHomePage ? 'white' : 'inherit'"
  >
    <Bell />
  </el-icon>
    
          <!-- 用户头像 -->
          <el-icon 
            :size="20" 
            style="cursor: pointer;" 
            :color="isHomePage ? 'white' : 'inherit'"
          >
            <User />
          </el-icon>
    
          <!-- 用户中心下拉菜单 -->
          <el-dropdown>
            <span 
              class="el-dropdown-link" 
              :style="{
                'display': 'flex',
                'align-items': 'center',
                'cursor': 'pointer',
                'color': isHomePage ? 'white' : 'inherit'
              }"
            >
             {{authStore.user?.username }}
              <el-icon style="margin-left: 5px;" :color="isHomePage ? 'white' : 'inherit'">
                <ArrowDown />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="handleOpen('/changePassword')">修改密码</el-dropdown-item>
                <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-main class="main">
        <!-- 中间区域显示中间部分 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {Menu,ArrowDown,Bell ,User} from '@element-plus/icons-vue'
import { useAuthStore } from '../stores/user';
import request from '@/utils/request';
import { useAlarmStore } from '@/stores/alarmNum';
import { storeToRefs } from 'pinia';

const alarmStore = useAlarmStore();
const { totalAlarms } = storeToRefs(alarmStore);

// 如果需要刷新告警数量
const refreshAlarms = async () => {
  await alarmStore.fetchTotalAlarms();
};

const router = useRouter()
const route = useRoute() // 获取当前路由信息
const activeIndex = ref('/home')  // 默认选中首页
const authStore = useAuthStore();//使用store仓库进行数据管理

// 计算属性判断当前是否是首页
const isHomePage = computed(() => {
  return route.path === '/home'
})

const handleOpen = (path: string) => {
  router.push(path)  // 跳转到对应的路由
  activeIndex.value = path  // 更新选中的菜单项
}
const handleLogout = () => {
  // 退出登录日志
  request.post('/user/insertOperation',{
    username : authStore.user?.username,
    name : authStore.user?.name,
    organizationID:authStore.organizationID,
    ip:null,
    operationModel:"退出登录",
    operationResult:"用户退出账号登录",
    operationTime:null,
    operationType:"login"
  }).then(res => {
    authStore.logout(); // 调用退出登录逻辑
    router.push('/'); // 跳转到登录页面
  })
};
</script>

<style scoped>
.common-layout {
  height: 100vh;
}  

.homePageTitle {
  cursor: pointer;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: calc(100vh - 60px);
}
  
.el-menu--collapse {
  min-height: calc(100vh - 60px);
}
  
.el-dropdown-link {
  cursor: pointer;
  display: flex;
  align-items: center;
}
  
.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
}
  
.el-aside {
  transition: width 0.3s;
  overflow: hidden;
}
  
.el-main {
  padding: 0;
  height: calc(100vh - 60px);
  overflow: auto;
}

.main {
  height: calc(100vh - 60px);
  padding: 0; /* 移除默认padding */
  overflow: hidden; /* 内容超出时出现滚动条 */
  background-color: black;
}
</style>